<template>
  <div class="SignUp">
    <div class="back" v-if="isWechat===false">
      <button class="back_icon" @click="deleteWebView"></button>
    </div>
    <div class="content">
      <img src="https://hnres.etalk365.com/app/image/activity_pic/superWordFile_11.jpg" alt="">
      <img src="https://hnres.etalk365.com/app/image/activity_pic/superWordFile_02.jpg" alt="">
      <img src="https://hnres.etalk365.com/app/image/activity_pic/superWordFile_03.jpg" alt="">
    </div>
    <button class="btn_join" v-if="!baseInfo && showbtn && !$route.query.look || $route.query.t || $route.query.fresh" @click="toSignUpDetail"></button>
    <button class="btn_join2" v-if="baseInfo && !$route.query.look"></button>
    <div class="telForm" v-if="showTelForm">
      <div class="telFormCentent">
        <div class="telFormCententBgTop">
          <p>报名啦~</p>
          <div class="btnX2" v-if="!showCode">
            <img src="../assets/btn_X.png" alt="" @click="showTelForm = false">
          </div>
          <div class="btnX" v-if="showCode">
            <img src="../assets/btn_back_signup.png" alt="" @click="backCode">
          </div>
        </div>
        <div class="telFormCententbottom" v-if="!showCode">
          <div style="height:0.9rem;"></div>
          <!-- <myInput label="手机号:" placeholder="请输入手机号" type="tel" ></myInput> -->
          <label for="telNum">手机号:</label><input @focus="pullUp" type="number" autofocus="true" v-model.number="Telephone" id="telNum" placeholder="请输入手机号" class="mint-cell-wrapper111">
        </div>
        <div class="telFormCententbottom showCode" v-if="showCode">
          <div style="height:0.7rem;"></div>
          <span>验证码将发送至: {{Telephone}}</span>
          <p v-if="time > 0">{{time}}s后重发</p>
          <p v-if="time <= 0" @click="getVcode">重新获取</p>
          <input @focus="pullUp" @blur="pullDown" type="number" autofocus="true" v-model.number="code" id="telNum" placeholder="请输入验证码" class="mint-cell-wrapper222">
        </div>
        <button class="nextStep" v-if="!showCode" @click="getVcode">
          下一步
        </button>
        <button class="nextStep" v-if="showCode" @click="singnUp">
          确定
        </button>
      </div>
    </div>
    <div v-html="totalTxt" class="rightTel" v-if="rightTel">
    </div>
  </div>
</template>

<script>
import {wxshare} from '../util/WXShare'
import { mapGetters } from 'vuex'
import AppBradge from '../util/appBradge'
import GetToken from '../util/getToken'
import {Indicator} from 'mint-ui'
import { getUserInfo, getCode, signUpByTel, checkIfShare, addTimesByShare } from '../request/question'
// import { Indicator, Toast } from 'mint-ui'
export default {
  name: 'SignUp',
  data () {
    return {
      showbtn: false,
      showTelForm: false,
      Telephone: '',
      showCode: false,
      time: 60,
      code: '',
      rightTel: false,
      totalTxt: '电话格式不正确',
      isWechat: false
    }
  },
  computed: {
    ...mapGetters(['baseInfo', 'token'])
  },
  created () {
    if (this.$route.query.token) {
      this.$store.dispatch('getToken', this.$route.query.token)
      getUserInfo({ tokenString: this.token }).then(data => {
        this.$store.dispatch('saveInfo', data)
        if (this.$route.query.checkRule === 'yes') {
          this.showbtn = false
        } else {
          this.$router.push({ name: 'RankList' })
        }
        // else if (!this.baseInfo) {
        //   this.showbtn = true
        // } else if (this.baseInfo) {
        //   this.$router.push({ name: 'RankList' })
        // }
      })
    } else if (this.$debugToken) {
      this.$store.dispatch('getToken', this.$debugToken)
      getUserInfo({ tokenString: this.token }).then(data => {
        this.$store.dispatch('saveInfo', data)
        if (this.$route.query.checkRule === 'yes') {
          this.showbtn = true
        } else {
          this.$router.push({ name: 'RankList' })
        }
        // else if (!this.baseInfo) {
        //   this.showbtn = true
        // } else if (this.baseInfo) {
        //   this.$router.push({ name: 'RankList' })
        // }
      })
    } else {
      GetToken.getToken(this).then(data => {
        this.$store.dispatch('getToken', data.tokenString)
        getUserInfo({ tokenString: this.token }).then(data => {
          this.$store.dispatch('saveInfo', data)
          if (this.$route.query.checkRule === 'yes') {
            this.showbtn = false
          } else {
            this.$router.push({ name: 'RankList' })
          }
          // else if (!this.baseInfo) {
          //   this.showbtn = true
          // } else if (this.baseInfo) {
          //   this.$router.push({ name: 'RankList' })
          // }
        })
      })
    }
  },
  mounted () {
    wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.$route.query.t + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg')
    var isWeixin = (function () { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })()
    if (isWeixin) {
      alert('微信')
    } else {
      alert('不是微信')
    }
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
  },
  methods: {
    successShare () {
      checkIfShare({tokenString: this.token}).then(data => {
        if (data.isShare === 0) {
          addTimesByShare({tokenString: this.token}).then(data => {
            if (data > 0) {
              // msg = '分享成功,当日增加两次答题机会'
              getUserInfo({ tokenString: this.token }).then(data => {
                this.$store.dispatch('saveInfo', data)
                this.router.push({name: 'RankList'})
              })
            }
          })
        }
      })
    },
    backCode () {
      this.showTelForm = true
      this.showCode = false
      this.showTelForm = true
      for (let i = 0; i < 9999; i++) {
        clearInterval(i)
      }
      this.time = 60
    },
    isPhone (phone) {
      let reg = /^1[345678]\d{9}$/
      return reg.test(phone)
    },
    singnUp () {
      signUpByTel({
        mobile: this.Telephone,
        verificationCode: this.code,
        recommendToken: this.$route.query.t,
        recommendWay: this.$route.query.source
      }).then(data => {
        if (Number(data.result) === 0) {
          this.totalTxt = '报名成功<br />登陆密码为手机号后六位<br />2秒后选择年级'
          this.rightTel = true
          this.$store.dispatch('setUsPhone', {phone: this.Telephone})
          this.$store.dispatch('zhugeSignUpByH5', {})
          wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + data.tokenString + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg', this.successShare)
          setTimeout(() => {
            this.rightTel = false
            this.$router.push({
              name: 'SignUpDetail',
              query: { t: data.tokenString }
            })
          }, 2000)
        } else if (Number(data.result) === 1) {
          this.totalTxt = '注册失败'
          this.rightTel = true
          setTimeout(() => {
            this.rightTel = false
          }, 1500)
        } else if (Number(data.result) === 2) {
          this.$store.dispatch('setUsPhone', {phone: this.Telephone})
          this.$store.dispatch('zhugeLoginByH5', {})
          this.totalTxt = '登陆成功'
          this.rightTel = true
          setTimeout(() => {
            this.rightTel = true
          }, 1500)
          this.$store.dispatch('getToken', data.tokenString)
          getUserInfo({ tokenString: this.token }).then(data => {
            this.$store.dispatch('saveInfo', data)
            if (this.$route.query.checkRule === 'yes') {
              this.showbtn = true
            } else if (!this.baseInfo) {
              this.showbtn = true
            } else if (this.baseInfo) {
              this.$router.push({ name: 'RankList' })
            }
          })
        }
      })
    },
    getVcode () {
      if (!this.isPhone(this.Telephone)) {
        this.rightTel = true
        setTimeout(() => {
          this.rightTel = false
        }, 1500)
      } else {
        Indicator.open({
          text: '正在发送验证码...',
          spinnerType: 'fading-circle'
        })
        getCode({ mobile: this.Telephone }).then(data => {
          if (Number(data.result) === 2) {
            // this.showCode = true
            let exitedToken = data.tokenString
            wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + exitedToken + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg', this.successShare)
            getUserInfo({ tokenString: exitedToken }).then(data => {
              if (!data) {
                Indicator.close()
                this.$router.push({
                  name: 'SignUpDetail',
                  query: { t: exitedToken }
                })
              } else {
                this.$router.push({
                  name: 'SignUp',
                  query: { token: exitedToken }
                })
                this.$store.dispatch('getToken', exitedToken)
                getUserInfo({ tokenString: exitedToken }).then(data => {
                  this.$store.dispatch('saveInfo', data)
                  if (this.$route.query.checkRule === 'yes') {
                    Indicator.close()
                    this.showbtn = true
                  } else if (!this.baseInfo) {
                    Indicator.close()
                    this.showbtn = true
                  } else if (this.baseInfo) {
                    Indicator.close()
                    this.$router.push({ name: 'RankList' })
                  }
                })
              }
            })
          } else if (Number(data.result) === 0) {
            this.showCode = true
            this.time = 60
            setInterval(() => {
              this.time--
              if (this.time === 0) {
                for (let i = 0; i < 9999; i++) {
                  clearInterval(i)
                }
              }
            }, 1000)
          }
          Indicator.close()
        })
      }
    },
    pullUp () {
      let dom = document.getElementsByClassName('telFormCentent')[0]
      dom.style.top = '40%'
    },
    pullDown () {
      let dom = document.getElementsByClassName('telFormCentent')[0]
      dom.style.top = '50%'
    },
    toSignUpDetail () {
      if (this.$route.query.t && this.$route.query.source) {
        this.$store.dispatch('zhugeInByshare', {})
        this.showTelForm = true
      } else if (this.$route.query.fresh) {
        this.showTelForm = true
      } else {
        this.$router.push({ name: 'SignUpDetail' })
      }
    },
    deleteWebView () {
      if (this.$route.query.from === 'growup') {
        location.href = 'https://metalk.etalk365.com/e/#/growup'
      } else if (this.$route.query.checkRule) {
        this.$router.push({name: 'RankList'})
      } else {
        AppBradge.deleteWebView()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../scss/signup";
.telForm {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index:5;
}
.telFormCentent {
  width: 100%;
}
.telFormCententBgTop {
  position: relative;
  z-index: 2;
  height: 2.1rem;
  width: 100%;
  background: url("../assets/bg_result_top.png");
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 0.45rem;
  text-align: center;
  font-weight: bold;
  p {
    padding-top: 1.14rem;
    letter-spacing: 0.1rem;
    // 0 1px rgba(255,95,136,0.5, 1px 0 rgba(255,95,136,0.5, -1px 0 rgba(255,95,136,0.5, 0 -1px rgba(255,95,136,0.5;
    // text-shadow:0.1rem 0.2rem 0.01rem rgba(255,95,136,0.5);
    // text-shadow:0 2px rgba(255,95,236,0.5), 1px 0 rgba(255,95,136,0.5), -2px 0 rgba(255,95,136,0.5), 0 -2px rgba(255,95,136,0.5);
  }
}
.telFormCentent {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.telFormCententbottom {
  position: relative;
  z-index: 1;
  width: 94%;
  height: 2rem;
  left: 3%;
  top: -0.5rem;
  background: white;
  border-radius: 0.3rem;
  overflow: hidden;
  font-size: 0.3rem;
  color: #7a585c;
  label {
    margin-left: 0.3rem;
  }
  p {
    width: 85%;
    margin: 0 auto;
    padding: 0.2rem;
    background: #ffe2de;
    border-radius: 0.3rem;
    box-shadow: 0 0.1rem 0 #ffbfcd;
  }
}
.showCode {
  height: 3.5rem;
  span {
    width: 85%;
    margin: 0 auto;
    padding: 0.2rem;
    display: block;
    text-align: center;
    // background: #FFE2DE;
    // border-radius: 0.3rem;
    // box-shadow: 0 0.1rem 0 #FFBFCD;
  }
  p {
    width: 35%;
    margin: 0 auto;
    padding: 0.1rem;
    background: #ffe2de;
    border-radius: 0.6rem;
    text-align: center;
    box-shadow: 0 0.05rem 0 #ffbfcd;
  }
}
.mint-cell-wrapper111,
.mint-cell-wrapper222 {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  font-size: 0.28rem;
  line-height: 1;
  min-height: inherit;
  overflow: hidden;
  padding: 0 10px;
  width: 65%;
  height: 0.5rem;
  margin-left: 0.3rem;
  border: 0;
  border-radius: 0.3rem;
  background: #ffece5;
}
.mint-cell-wrapper222 {
  margin-left: 17.5%;
  margin-top: 0.3rem;
}
::-webkit-input-placeholder {
  color: #aa8a8a;
}
.nextStep {
  width: 40%;
  height: 0.8rem;
  background: -webkit-linear-gradient(left, #ff8871, #ff559f);
  border-radius: 0.4rem;
  color: white;
  font-size: 0.3rem;
  display: block;
  margin: 0 auto;
}
.rightTel {
  position: fixed;
  top: 50%;
  font-size: 0.25rem;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 0.3rem;
  line-height: 0.4rem;
  display: block;
  text-align: center;
  z-index: 999999;
  padding: 0.2rem;
}
.btnX {
  position: absolute;
  top: 3%;
  transform: translateY(-110%) scale(0.7);
}
.btnX2 {
  position: absolute;
  right: 0%;
  top: 3%;
  transform: translateY(-110%) scale(0.7);
}
.back_icon{
  z-index:2;
}
</style>
